<template>
  <view class="detail-evaluation" :data-theme="theme" id="detail-evaluation">
    <view class="he-top flex justify-between align-center" @tap="navigateTo">
      <view class="flex align-center">
        <view class="he-sign"></view>
        <view class="he-title">
          <text>评价</text>
          <text class="he-number">({{ count }})</text>
        </view>
      </view>
      <view class="flex justify-center align-center">
        <text class="he-more">查看全部</text>
        <view class="iconfont iconbtn_arrow"></view>
      </view>
    </view>
    <view class="he-center flex justify-between align-center" v-if="count > 0">
      <view class="flex align-center">
        <image :src="evaluation.user.avatar" class="he-avatar"></image>
        <view class="he-name">
          {{ evaluation.user.nickname }}
        </view>
      </view>
      <view class="flex">
        <!--#ifndef H5-->
        <text
          v-for="item in 5"
          :key="item"
          class="iconfont iconevaluate_star"
          :class="evaluation.star >= item + 1 ? 'he-star__1' : 'he-star__0'"
        ></text>
        <!--#endif-->
        <!--#ifdef H5-->
        <text
          v-for="item in 5"
          :key="item"
          class="iconfont iconevaluate_star"
          :class="evaluation.star >= item ? 'he-star__1' : 'he-star__0'"
        ></text>
        <!--#endif-->
      </view>
    </view>
    <view class="he-body" v-if="count > 0">
      <view class="he-content he-line-3">
        {{ evaluation.content }}
      </view>
      <view
        class="he-pictures flex flex-wrap"
        v-if="!$h.test.isEmpty(evaluation.images)"
      >
        <he-image
          v-for="(item, index) in images"
          :key="index"
          :height="160"
          :width="160"
          mode="aspectFill"
          class="he-img"
          :image-style="{
            borderRadius: '8rpx',
          }"
          :src="item"
          @click="doPreviewImage(item, images)"
        ></he-image>
      </view>
    </view>
    <view class="he-nothing" v-if="count === 0">暂无评价</view>
  </view>
</template>

<script>
export default {
  name: "detail-evaluation",
  props: {
    goodsId: {
      type: Number,
    },
  },
  computed: {
    images: function () {
      return this.evaluation.images.slice(0, 4);
    },
  },
  data() {
    return {
      count: 0,
      evaluation: {
        images: [],
        user: {},
      },
    };
  },
  methods: {
    navigateTo: function navigateTo() {
      uni.navigateTo({ url: "/pages/goods/evaluation?id=" + this.goodsId });
    },
    getEvaluation: function () {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$heshop
          .evaluate("get", {
            goods_id: _this.goodsId,
            tab_key: "all",
          })
          .page(1, 1)
          .then((res) => {
            if (!_this.$h.test.isEmpty(res.data)) {
              resolve(res.data[0]);
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    getTabCount: function () {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$heshop
          .tabcount(
            "post",
            {
              include: "orderevaluate",
            },
            {
              goods_id: _this.goodsId,
            }
          )
          .then(function (res) {
            resolve(res);
          })
          .catch(function (err) {
            reject(err);
          });
      });
    },
    doPreviewImage(img, images) {
      this.$utils.doPreviewImage(img, images);
    },
  },
  mounted() {
    let _this = this;
    Promise.all([this.getTabCount(), this.getEvaluation()])
      .then(function (res) {
        _this.count = res[0].all;
        _this.evaluation = res[1];
      })
      .catch(function (err) {
        _this.$toError(err);
      });
  },
};
</script>

<style scoped lang="scss">
.detail-evaluation {
  margin: 20px 20px 0 20px;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 24px 24px 24px;
}
.he-top {
  height: 71px;
}
.he-sign {
  width: 6px;
  height: 28px;
  @include background_color("background_color");
  border-radius: 3px;
}
.he-title {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-left: 11px;
}
.he-number {
  color: #999999;
}
.iconbtn_arrow {
  font-size: 22px;
  color: RGBA(190, 190, 190, 1);
}
.he-more {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-right: 8px;
}
.he-center {
  height: 48px;
  margin-top: 20px;
}
.he-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 16px;
}
.he-name {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.iconevaluate_star {
  font-size: 20px;
  width: 20px;
  height: 20px;
  margin-left: 8px;
}
.he-body {
  margin-top: 21px;
}
.he-content {
  font-size: 24prx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 1.3;
}
.he-pictures {
  margin-top: 21px;
}
.he-img {
  margin: 0 4px 4px 0;
}
.he-star__0 {
  color: rgba(229, 229, 229, 1);
}
.he-star__1 {
  color: rgba(255, 199, 28, 1);
}
.he-nothing {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  text-align: center;
  margin: 20px 0 24px 0;
}
</style>
